<template>
  <div>
    <a-modal :visible="visible" @before-open="open" :on-before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="700px" :mask-closable="false">
      <template #title> {{ type == 'add' ? '新增地址' : '编辑地址' }} </template>
      <div>
        <a-form auto-label-width ref="formRef" size="medium" :model="form">
          <a-space direction="vertical" :size="24">
            <a-row>
              <a-col :span="12">
                <a-form-item field="name" label="名称" :rules="rules.name">
                  <a-input v-model="form.name" placeholder="请输入名称"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="contactor" label="联系人" :rules="rules.contactor">
                  <a-input v-model="form.contactor" placeholder="请输入联系人"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item field="landlinePhone" label="电话" :rules="rules.landlinePhone">
                  <a-input v-model="form.landlinePhone" placeholder="请输入电话"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="mobilePhone" label="手机号" :rules="rules.mobilePhone">
                  <a-input v-model="form.mobilePhone" placeholder="请输入联系人"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item field="email" label="邮箱" :rules="rules.email">
                  <a-input v-model="form.email" placeholder="请输入邮箱"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="type" label="类型" :rules="rules.type">
                  <a-select v-model="form.type" placeholder="请选择类型">
                    <a-option label="发货地址" value="ship"></a-option>
                    <a-option label="揽收地址" value="collect"></a-option>
                    <a-option label="退货地址" value="return"></a-option>
                    <a-option label="回邮地址" value="reply"></a-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item field="country" label="国家" :rules="rules.country">
                  <a-select v-model="form.country" placeholder="请选择国家" @change="changeCountry" allow-clear allow-search>
                    <a-option v-for="item of countriesOptions" :value="item.name">{{ item.name }}-{{ item.short }}</a-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="postalCode" label="邮编" :rules="rules.postalCode">
                  <a-input v-model="form.postalCode" placeholder="请输入邮编"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item field="stateOrRegion" label="省/州" :rules="rules.stateOrRegion">
                  <a-input v-model="form.stateOrRegion" placeholder="请输入省/州"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item field="area" label="市/区" :rules="rules.area">
                  <a-input v-model="form.area" placeholder="请输入市/区"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-item field="address" label="地址" :rules="rules.address">
                  <a-input v-model="form.address" placeholder="请输入地址"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="24">
                <a-form-item label="处理点">
                  <a-input v-model="form.location" placeholder="请输入联系人"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-space>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { upsertExpressAddress } from '@/api/warehouse'
  import { Message } from '@arco-design/web-vue'
  import { countriesOptions } from '@/utils/countries'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['type', 'info'],
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const data = reactive({
        form: {} as any,
        rules: {
          name: [{ required: true, message: '请输入名称' }],
          contactor: [{ required: true, message: '请输入联系人' }],
          landlinePhone: [{ required: true, message: '请输入电话' }],
          mobilePhone: [{ required: true, message: '请输入手机号' }],
          email: [{ required: true, message: '请输入邮箱' }],
          type: [{ required: true, message: '请选择类型' }],
          country: [{ required: true, message: '请选择国家' }],
          postalCode: [{ required: true, message: '请输入邮编' }],
          stateOrRegion: [{ required: true, message: '请输入省/州' }],
          area: [{ required: true, message: '请输入市/区' }],
          address: [{ required: true, message: '请输入地址' }],
        },
        countriesOptions: countriesOptions,
      })

      const open = () => {
        // getUserList()
        if (props.type == 'edit') {
          data.form = _.cloneDeep(props.info)
        }
      }
      const handleOk = (done: any) => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            data.form.city = data.form.area
            data.form.enable = true
            let params: any = {
              upsertList: [data.form],
            }

            try {
              const res: any = await upsertExpressAddress(params)
              if (res.code == 'SUCCESS') {
                data.form = {}
                Message.success(props.type == 'edit' ? '修改成功' : '新增成功')
                visible.value = false
                emit('save')
              }
              done(true)
            } catch (error) {
              done(true)
            }
          } else {
            done(true)
          }
        })
      }
      const handleCancel = () => {
        data.form = {}
        formRef.value.clearValidate()
        visible.value = false
      }

      const changeCountry = (val: string) => {
        let obj: any = countriesOptions.find((e) => e.name == val)
        data.form.countryCode = obj.short
      }

      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        changeCountry,
      }
    },
  })
</script>

<style lang="less" scoped></style>
